/**
 * 基础菜单 部门奖金发放
 */
<template>
  <div>
    <div class="container">
      <div class="head">
        <div class="top">
          <span style="margin-left: 20px">链单信息</span>
        </div>
        <div class="bottom">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <table border="1">
              <tr align="center">
                <th class="th1">开单人</th>
                <th class="th2">
                  {{ formInline.username }}
                </th>
                <th class="th1">链单流转网络:</th>
                <th class="th2">
                  {{ formInline.network }}
                </th>
              </tr>
              <tr>
                <th class="th1">融资机构</th>
                <th class="th2">
                  {{ formInline.bank }}
                </th>
                <th class="th1">收单人</th>
                <th class="th2">
                  {{ formInline.username }}
                </th>
              </tr>
              <tr>
                <th class="th1">链单编号</th>
                <th class="th2">
                  {{ formInline.chain_no }}
                </th>
                <th class="th1">链单金额(元)</th>
                <th class="th2">
                  {{ formInline.money }}
                </th>
              </tr>
              <tr>
                <th class="th1">开单日</th>
                <th class="th2">
                  {{ formInline.create_time }}
                </th>
                <th class="th1">兑付日</th>
                <th class="th2">
                  {{ formInline.deadline }}
                </th>
              </tr>
            </table>
          </el-form>
        </div>
      </div>
      <div class="head">
        <div class="top">
          <span style="margin-left: 20px">单据凭证</span>
        </div>
        <div class="bottom1">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <table border="1">
              <tr style="height:180px">
                <th class="th1">合同附件</th>
                <th class="th2">
                  <div class="flex-div uploaditem" style="height: 80%;">
                    <div class="img-div" v-for="item in hetongData" :key="item.id">
                      <el-image :src="item.file_url" :preview-src-list="srcList" @click="vbs(item.file_url)">
                      </el-image>
                    </div>
                  </div>
                </th>
              </tr>
              <tr style="height:180px">
                <th class="th1">发票附件</th>
                <th class="th2">
                  <div class="flex-div uploaditem" style="height: 80%;">
                    <div class="img-div" v-for="item in fapiaoData" :key="item.id">
                      <el-image :src="item.file_url" :preview-src-list="srcList" @click="vbs(item.file_url)">
                      </el-image>
                    </div>
                  </div>
                </th>
              </tr>
              <tr style="height:180px">
                <th class="th1">单据凭证</th>
                <th class="th2">
                  <div class="flex-div uploaditem" style="height: 80%;">
                    <div class="img-div" v-for="item in pinzhengData" :key="item.id">
                      <el-image :src="item.file_url" :preview-src-list="srcList" @click="vbs(item.file_url)">
                      </el-image>
                    </div>
                  </div>
                </th>
              </tr>
            </table>
          </el-form>
        </div>
      </div>
      <div class="head movBottom">
        <div class="top">
          <span style="margin-left: 20px">操作处理</span>
        </div>
        <div class="bottom">
          <div>
            <el-row>
              <el-col :span="4"
                style="border: 1px solid gray; height: 50px; text-align: center;line-height: 50px;background-color: rgb(243,243,243);">
                <div class="grid-content bg-purple">处理结果</div>
              </el-col>
              <el-col :span="20" style="border: 1px solid gray; height: 50px;">
                <div class="grid-content bg-purple-light">
                  <el-form :inline="true" :model="formInline" class="demo-form-inline"
                    style="position:relative; left: 20px; top: 5px">
                    <el-form-item>
                      <el-radio-group v-model="reasonStatus" size="medium">
                        <el-radio label="同意"></el-radio>
                        <el-radio label="拒绝"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="审批原因" style="position: relative; left: 40px">
                      <el-input v-model="checkParam.reason" placeholder="请填写审核原因" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item style="position: relative; left: 40px">
                      <el-button type="primary" @click="onSubmit">完成，处理审核</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>

          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" plain @click="prePage" style="position: relative; left: 45%; top: 20px">返回</el-button>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loginuser: "", //登录用户
      loading: false, //是显示加载
      editForm: {
        orderCode: "",
      },
      formInline: {
        id: "",
        network: "",
        network_id: "",
        bank: "",
        fund_name: "",
        fund_id: "",
        username: "",
        create_time: "",
        deadline: "",
        chain_no: "",
        creator: "",
        money: "",
        surplus: "",
        enterprise_id: "",
        page: 1,
        reason: "",
        // token: localStorage.getItem("logintoken"),
      },
      //请求头
      headers: { "Content-Type": "multipart/form-data" },
      dataSize: "",
      picData: [], //file的相关数据
      hetongData: [],
      fapiaoData: [],
      pinzhengData: [],
      listData: [], //用户数据
      scfpData: [], //用户数据
      tempData: [], //临时存储
      bankName: [],
      fundName: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      chain_id: 0,
      originalData: {
        id: 0,
        currentPage: 1,
        pageSize: 1,
      },
      srcList: [
        ""
      ],
      reasonStatus: "",
      checkParam: {
        id: 0,
        reason: "",
        status: 0,
        update_time: "",
        updator: 0,
      },
      user: {},
      chain_money: 0,
      old_money: 0,
      new_money: 0,
      enterpriseData: {
        id: 0,
        surplus: 0,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 创建完毕
   */
  created() {
    this.user = JSON.parse(localStorage.getItem('userdata'))
    this.chain_id = this.$route.query.chain_id
    this.getdata()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata() {
      this.formInline.id = this.chain_id
      this.originalData.id = this.chain_id
      this.loginuser = JSON.parse(
        localStorage.getItem("userdata")
      ).employee_name;
      this.loading = true;
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      // 获取图片
      this.$axios.get("/api/file/getPic/" + this.formInline.id)
        .then((res) => {
          if (res.data.code == "200") {
            this.picData = res.data.data;
            this.classify();
          }
        }).catch((err) => { });
      this.$axios.post("/api/chain/findById", this.originalData)
        .then((res) => {
          if (res.data.code == "200") {
            this.formInline.username = res.data.data.scfpUser.name
            this.formInline.network = res.data.data.scfpNetwork.id
            this.formInline.bank = res.data.data.bank
            this.formInline.chain_no = res.data.data.chain_no
            this.formInline.money = res.data.data.money
            this.formInline.create_time = res.data.data.create_time
            this.formInline.deadline = res.data.data.deadline

            this.old_money = res.data.data.scfpEnterprise.surplus
            this.chain_money = res.data.data.money
            this.new_money = this.old_money - this.chain_money
            this.enterpriseData.id = res.data.data.scfpEnterprise.id
            this.enterpriseData.surplus = this.new_money
          }
        }).catch((err) => { });
    },
    classify() {
      for (let i of this.picData) {
        if (i.file_type == "合同附件") {
          this.hetongData.push(i)
        } else if (i.file_type == "发票附件") {
          this.fapiaoData.push(i)
        } else if (i.file_type == "单据凭证") {
          this.pinzhengData.push(i)
        }
      };
    },
    vbs(url) {
      this.srcList = []
      this.srcList.push(url)
    },
    onSubmit() {
      this.checkParam.id = this.chain_id
      this.checkParam.updator = this.user.id
      if (this.reasonStatus == '同意') {
        this.checkParam.status = 2
        this.$axios.put("/api/chain/updateEnterprise", this.enterpriseData)
          .then(res => {
            
          }).catch()
      } else if (this.reasonStatus == '拒绝') {
        this.checkParam.status = 3
      }
      this.getDateTime()
      this.$axios.put("/api/chain/update", this.checkParam)
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: "审核成功"
            })
            this.$router.push({ path: '/chain/recheck' })
          }
        }).catch()
    },
    getDateTime() {
      var getDate = new Date;
      let dateYear = getDate.getFullYear();             //获取年  
      let dateMonth = getDate.getMonth() + 1;               //获取月  
      let dateDate = getDate.getDate();                 //获取当日
      let dateHours = getDate.getHours();               //获取小时
      let dateMinutes = getDate.getMinutes();           //获取分钟
      let dateSeconds = getDate.getSeconds();           //获取秒

      dateMonth = dateMonth < 10 ? "0" + dateMonth : dateMonth;
      dateDate = dateDate < 10 ? "0" + dateDate : dateDate;
      dateHours = dateHours < 10 ? "0" + dateHours : dateHours;
      dateMinutes = dateMinutes < 10 ? "0" + dateMinutes : dateMinutes;
      dateSeconds = dateSeconds < 10 ? "0" + dateSeconds : dateSeconds;
      this.checkParam.update_time = dateYear + "-" + dateMonth + "-" + dateDate + " " + dateHours + ":" + dateMinutes + ":" + dateSeconds;
    },
    prePage() {
      window.history.back();
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}

.mydivbox {
  margin: 0 auto;
  width: 500px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.mydivboxhead {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin: -20px -20px auto;
}

.container {
  width: 80%;
  border: 1px solid rgb(138, 138, 138);
  margin: 0 auto;
  height: 1300px;
}

.container .head {
  width: 100%;
  height: 420px;
}

.container .head .top {
  width: 100%;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
}

.container .head .bottom {
  height: 180px;
  width: 90%;
  margin: 0 auto;
  margin-top: 35px;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

tr {
  height: 60px;
}

.th1 {
  width: 20%;
  padding-right: 10px;
  background-color: #f3f3f3;
  text-align: center;
  font-size: 14px;
}

.th2 {
  width: 30%;
}

.bottom1 {
  width: 90%;
  height: 260px;
  margin: 0 auto;
  margin-top: 35px;
}

.bottom1 .th1 {
  width: 20%;
}

.bottom1 .th2 {
  width: 80%;
}

.bottom1 tr {
  height: 180px;
}

.img-div {
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
  float: left;
  width: 20%;
}

.flex-div {
  height: 80%;
  padding-bottom: 10px;

}

.movBottom {
  position: relative;
  top: 300px;
}

img {
  height: 160px;
}
</style>

 
 